<div fxLayout="row wrap" fxLayoutGap="12px grid">
    <div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
    <stb-widget-state
      [value]="load_time / 1000 | number: '0.3-3'"
      icon="group_add"
      backgroundcolor="linear-gradient(-134deg, #8C99E0 0%, #6572B8 100%)"
      textcolor="white"
      property="平均加载耗时"
      changeicon="trending_up"
      valuesubfix="ms"
    ></stb-widget-state>
  </div>
  <div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
    <stb-widget-state
      [value]="white_time | number: '0.3-3'"
      icon="pageview"
      backgroundcolor="linear-gradient(-134deg, #4DD0E2 0%, #4CA8BA 100%)"
      textcolor="white"
      property="平均白屏耗时"
      changeicon="trending_up"
      valuesubfix="ms"
    ></stb-widget-state>
  </div>

  <div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
    <stb-widget-state
      [value]="dom_time | number: '0.3-3'"
      icon="monetization_on"
      backgroundcolor="linear-gradient(-134deg, #81C683 0%, #62A864 100%)"
      textcolor="white"
      property="平均DOM构建耗时"
      changeicon="trending_down"
      valuesubfix="s"
    ></stb-widget-state>
  </div>

  <div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
    <stb-widget-state
      [value]="count"
      icon="playlist_add"
      backgroundcolor="linear-gradient(-134deg, #EAC459 0%, #DCAC3F 100%)"
      textcolor="white"
      property="调用次数"
      changeicon="trending_up"
    ></stb-widget-state>
  </div>

  <div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
    <stb-widget-state
      [value]="analysisDom_time | number: '0.3-3'"
      icon="group_add"
      backgroundcolor="linear-gradient(-134deg, #ff6e40 0%, #8e24aa 100%)"
      textcolor="white"
      property="平均解析DOM耗时"
      changeicon="trending_up"
      valuesubfix="ms"
    ></stb-widget-state>
  </div>

  <div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
    <stb-widget-state
      [value]="dns_time | number: '0.3-3'"
      icon="pageview"
      backgroundcolor="linear-gradient(-134deg, #1de9b6 0%, #43a047 100%)"
      textcolor="white"
      property="平均DNS解析耗时"
      changeicon="trending_up"
      valuesubfix="ms"
    ></stb-widget-state>
  </div>

  <div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
    <stb-widget-state
      [value]="tcp_time | number: '0.3-3'"
      icon="monetization_on"
      backgroundcolor="linear-gradient(-134deg, #ffca28 0%, #ff6f00 100%)"
      textcolor="white"
      property="平均TCP连接耗时"
      changeicon="trending_down"
      valuesubfix="ms"
    ></stb-widget-state>
  </div>

  <div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
    <stb-widget-state
      [value]="request_time | number: '0.3-3'"
      icon="playlist_add"
      backgroundcolor="linear-gradient(-134deg, #7c4dff 0%, #7b1fa2 100%)"
      textcolor="white"
      property="平均request请求耗时"
      changeicon="trending_up"
      valuesubfix="ms"
    ></stb-widget-state>
  </div>

  <div fxFlex.gt-xs="33.33" fxFlex.lt-md="50" fxFlex.lt-sm="100">
    <stb-widget-state
      [value]="ready_time | number: '0.3-3'"
      icon="playlist_add"
      backgroundcolor="linear-gradient(-134deg, #b2ff59 0%, #0097a7 100%)"
      textcolor="white"
      property="平均页面准备耗时"
      changeicon="trending_up"
      valuesubfix="ms"
    ></stb-widget-state>
  </div>
</div>

<mat-card class="m-b-20">
  <mat-card-header> <mat-card-title>访问者信息</mat-card-title> </mat-card-header>
</mat-card>

<mat-tab-group class="mat-elevation-z4">
  <mat-tab label="all"> Content 1 </mat-tab>
  <mat-tab label="xhr"> Content 2 </mat-tab>
  <mat-tab label="js"> Content 3 </mat-tab>
  <mat-tab label="css"> Content 3 </mat-tab>
  <mat-tab label="img"> Content 3 </mat-tab>
  <mat-tab label="other"> Content 3 </mat-tab>
</mat-tab-group>
